<template>
  <div>
    <div>Store</div>
    <div>
      <p>{{$store.state.name}}</p>
      <p>{{$store.getters.compose}}</p>
      <!-- <p>{{$store.getters.wrapper.token}}</p> -->
      <p>{{auth.token}}</p>
    </div>
    <div class="margin-wrapper">
      <button @click="modifyStateMutations">Modify Mutations</button>
      <button @click="modifyStateAtions">Modify Ations</button>
    </div>
    <div class="margin-wrapper">
      <button @click="modifyStateAuth">Modify Object Vuex</button>
      <button @click="modifyPlainAuth">
        <span class="error">Modify Object Plain</span>
      </button>
    </div>
    <div class="margin-wrapper">
      <button @click="modifyComputed">Modify Computed</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Store",
  data() {
    return {
      msg: "Vue.observable",
    };
  },
  computed: {
    auth: {
      set(value) {
        console.log(value);
        this.$store.commit("setAuth", value);
      },
      get() {
        return this.$store.getters.wrapper;
      },
    },
  },
  mounted() {
    console.log(this.$store);
  },
  methods: {
    modifyStateMutations() {
      this.$store.commit("setName", "Vue.observable");
    },
    modifyStateAtions() {
      this.$store.dispatch("setNameAction", "setNameAction");
    },
    modifyStateAuth() {
      this.$store.commit("setAuth", {
        token: "This is Modified Values",
        name: "longxiaobai",
        createdAt: "2020-08-06T06:34:29.912Z",
      });
    },
    modifyPlainAuth() {
      this.$store.getters.wrapper = {
        token: "This is Modified Values",
        name: "longxiaobai",
        createdAt: "2020-08-06T06:34:29.912Z",
      };
    },
    modifyComputed() {
      this.auth = {
        token: "This is Modified Values",
        name: "longxiaobai",
        createdAt: "2020-08-06T06:34:29.912Z",
      };
    },
  },
};
</script>

<style scoped>
.margin-wrapper {
  margin-bottom: 16px;
}

button {
  font-size: 16px;
}

.error {
  color: #f56c6c;
}
</style>
